<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>DZ Combat Simulator</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <style type="text/css">
    table {
      text-align: center;
      width: 280px;
    }
	td { 
		text-align: center;
		font-size: 24pt;
		font-variant: small-caps;
	 }
	td.diagram {
		
	}

	td.output, td.input {
		font-size: 10pt;
	}

	span.mult { 
		font-style: italic;
	}
	td span.mult {
		color: red;
	}
  </style>
<script type="text/javascript">
//<![CDATA[
// Function to return n rolls of an x sided dice from string of format nDx, or Dx.
function diceRoll (dice) {
	if (dice.toUpperCase().indexOf("D") == 0) {
		dice = 1 + dice;
	}
	var d = dice.toUpperCase().split("D");

	var result = 0;

	for (i=0;i<d[0];i++) {
		result += Math.floor(Math.random()*d[1])+1;
	}

	return result;
}

function woundtype (damage, bodytype) {
	var woundtable = [ 
		[ 3, 4, 4, 5, 5, 5, 5],
		[ 3, 3, 4, 5, 5, 5, 5],
		[ 2, 3, 4, 4, 5, 5, 5],
		[ 1, 2, 3, 4, 5, 5, 5],
		[ 0, 1, 2, 3, 4, 5, 5],
		[ 0, 0, 1, 2, 3, 4, 5],
		[ 0, 0, 0, 1, 2, 3, 4]
	]
	var wounds = ["no significant damage", "a flesh wound", "a serious wound", "a critical wound", "a mortal wound", "death"];
	var woundcolors = ["grey", "CCCC00", "CC9900", "CC6600", "CC3300", "CC0000"] 
	var woundcode = ["--", "FW", "SW", "CW", "MW", "DEAD"];
	var result = -1;

	if (damage < 5) {
		result = 0;
	} else if (damage < 9) {
		result = 1;
	} else if (damage < 13) {
		result = 2;
	} else if (damage < 17) {
		result = 3;
	} else if (damage < 21) {
		result = 4;
	} else if (damage < 25) {
		result = 5;
	} else {
		result = 6;
	}
	var n = woundtable[bodytype][result];
	return [wounds[n], woundcode[n], woundcolors[n]];
}

function hit (dice, bodytype) {
	var hitlocation = [0, 1, 1, 1, 2, 2, 3, 3, 4, 5];
	var locations = [
		"head <span class=mult>(x2)</span>",
		"torso",
		"right arm",
		"left arm",
		"right leg",
		"left leg"
	];
	var image = [
		"head.png",
		"torso.png",
		"r_arm.png",
		"l_arm.png",
		"r_leg.png",
		"l_leg.png"
	];

	var location = Math.floor(Math.random()*10);
	var damage = diceRoll(dice);
	if (location == 0) {
		damage = damage*2;
	}	

	var hit = locations[hitlocation[location]];
	var type = woundtype(damage,bodytype);
	var output = "You hit your opponent in the <b>" + hit + "</b> for <b>" + damage + "</b> points of damage, causing <b>" + type[0] + "</b>.";
	
	document.getElementById('location').innerHTML = hit;
	document.getElementById('damage').innerHTML = damage + " pts";
	document.getElementById('wound').innerHTML = type[1];
	document.getElementById('output').innerHTML = output;
	document.getElementById('body_cell').bgColor = type[2];
	document.getElementById('wound_cell').bgColor = type[2];
	document.getElementById('body_diagram').src = image[hitlocation[location]];
}
// ]]>
</script>
</head>
<body>
<table>
<tr><td class="input">
<form action="?">
  <p>
	Wielding
	<select name="weapon">
		<option value="D2">Fists {D4/2}</option>
		<option value="D4" selected="selected">Dagger / Hunting Knife {D4}</option>
		<option value="D6">Short Sword / Machete {D6}</option>
		<option value="D8">Sword {D8}</option>
		<option value="D10">Two-handed weapon {D10}</option>
		<option value="D12">Mechanized weapon {D12}</option>
		<option value="2D6">Pistol / Light SMG {2D6}</option>
		<option value="2D8">Rifle / Heavy SMG {2D8}</option>
		<option value="2D10">Assault or Sniper Rifle {2D10}</option>
		<option value="2D12">Antimateriel Rifle {2D12}</option>
	</select>
	against
	<select name="bodytype">
		<option value="0">H-</option>
		<option value="1">Very Weak</option>
		<option value="2">Weak</option>
		<option value="3" selected="selected">Average</option>
		<option value="4">Strong</option>
		<option value="5">Very Strong</option>
		<option value="6">H+</option>
	</select>
	bodytype.

	<input type="button" value="Hit Location and Damage" onclick="hit(document.forms[0].weapon.value, document.forms[0].bodytype.value);" />
  </p>
</form></td>
	</tr>
	<tr>
		<td class="diagram" id="body_cell">
			<img id="body_diagram" src="body.png" alt="Body Diagram" />
		</td>
	</tr>
	<tr>
		<td><span id="location"></span></td>
	</tr>
	<tr>
		<td><span id="damage"></span></td>
	</tr>
	<tr>
		<td id="wound_cell"><span id="wound"></span></td>
	</tr>
	<tr>
		<td class="output">
			<span id="output"></span>
		</td>
	</tr>
</table>

<div id="image_cache" style="display: none;">
	<img src="head.png" alt="Head" />
	<img src="torso.png" alt="Torso" />
	<img src="r_arm.png" alt="Right Arm" />
	<img src="l_arm.png" alt="Left Arm" />
	<img src="r_leg.png" alt="Right Leg" />
	<img src="l_leg.png" alt="Left Leg" />
</div>
</body>
</html>
